<template>
	<view>
		<u-button :customStyle="customStyle" :ripple="ripple" :hair-line="hairLine"
		          :shape="shape" :type="type" :size="size" :hoverClass="hoverClass"
							:disabled="disabled" @click="btnClick" :loading="isLoading"><slot></slot></u-button>
	</view>
</template>
<script>
	export default {
		name:"dy-button",
		props: {
			isLoading: {
				type: Boolean,
				default: false
			},
			// 按钮尺寸，default，medium，mini
			size: {
				type: String,
				default: 'mini'
			},
      fontSize: {
        type: String,
        default: ''
      },
      fontWeight: {
        type: String,
        default: ''
      },
			width: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: 'var(--mainColor)'
			},
			background: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#fff'
			},
			borderColor: {
				type: String,
				default: 'var(--mainColor)'
			},
			shape: {
				type: String,
				default: 'circle'
			},
			ripple: {
				type: Boolean,
				default: true
			},
			// 是否禁止状态
			disabled: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'info'
			},
			hairLine: {
				type: Boolean,
				default: false
			},
			hoverClass: {
				type: String,
				default: 'button-hover'
			},
			
		},
		computed: {
			customStyle() {
				let obj = {}
				if(this.width) obj.width = this.width
				if(this.height) obj.height = this.height
				if(this.backgroundColor) obj.backgroundColor = this.backgroundColor
				if(this.fontSize) obj.fontSize = this.fontSize
				if(this.fontWeight) obj.fontWeight = this.fontWeight
				if(this.borderColor) obj.borderColor = this.borderColor
				if(this.color) obj.color = this.color
				return obj
			}
		},
		methods: {
			btnClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">

</style>
